<template>
    <nav class="navbar">
    <div class="nav-container">
      <ul class="nav-menu">
        <li 
          v-for="item in menuItems" 
          :key="item.path"
          :class="{ 'active': activePath === item.path }"
        >
          <router-link :to="item.path">{{ item.title }}</router-link>
        </li>
      </ul>
      <ul class="right-menu">
        <template v-if="!isLoggedIn">
          <li><router-link to="/login">登录</router-link></li>
          <li><router-link to="/register">注册</router-link></li>
        </template>
        <li v-else>
          <a href="#" @click.prevent="logout">退出登录</a>
        </li>
      </ul>
    </div>
  </nav>
</template>
<script setup>
import { computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

const menuItems = computed(() => {
  const baseItems = [
    { path: '/', title: '首页' }
  ]
  if (isAdmin.value) {
    baseItems.push({ path: '/admin', title: '管理端' })
  } else {
    baseItems.push({ path: '/user', title: '我的餐厅' })
  }
  return baseItems
})

const isLoggedIn = computed(() => !!localStorage.getItem('token'))
const isAdmin = computed(() => localStorage.getItem('isAdmin') === 'true')
const activePath = computed(() => route.path)

const logout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('isAdmin')
  router.push('/login')
}
</script>

<style scoped>
.navbar {
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0 2rem;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60px;
}

.nav-menu,
.right-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-menu li,
.right-menu li {
  position: relative;
}

.nav-menu a,
.right-menu a {
  color: #64748b;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-menu a.router-link-exact-active,
.nav-menu .active a {
  color: #4f46e5;
}

.nav-menu a:hover,
.right-menu a:hover {
  color: #4f46e5;
}

.right-menu {
  margin-left: auto;
}

</style>